<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>获奖名单</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>

<script src="/js/vue/vue.js"></script>
<link rel="stylesheet" href="/js/elementui/index.css">
<script src="/js/elementui/index.js"></script>

<script src="/js/theme/pptx/libs/jquery.min.js"></script>
<link rel="stylesheet" href="/js/layer/layer.css" type="text/css">
<script src="/js/layer/layer.js"></script>

<link rel="stylesheet" href="/css/common.css" type="text/css">
<script src="/js/common.js?t=20211213150417"></script>

<script src="/js/cert/setting.js?t=20250804"></script>
<script src="/js/cert/detail_setting.js?t=20250804"></script>
<script src="/js/cert/cert_type.js?t=20250804"></script>
<script src="/js/cert/cert_gen.js?t=20250804"></script>

<script src="/js/base.data.info.js?t=20250804"></script>
<script src="/js/excel.data.handler.js?t=20250804"></script>
<script src="/js/my.data.handler.js?t=20250804"></script>
<script src="/js/cert.data.handler.js?t=20250804"></script>


<script src="js/data.info.js?t=20250804"></script>
<script src="js/my.data.js?t=20250804"></script>
<script src="js/cert.data.js?t=20250804"></script>

<style>
    .cert-grid {
        width: 100%;
        display: grid;
        grid-template-columns:300px 1240px;
        border-bottom: 2px solid gray;
        min-height: 30px;
    }

    .pool-grid {

        display: grid;
        grid-template-columns:250px 80px 80px  80px 200px 200px 350px;

        min-height: 30px;
    }

    .pool-grid-body {
        border-bottom: 1px solid gray;
        overflow-wrap: break-word;
    }

    .top-pool-grid > .pool-grid:last-child {
        border-bottom: none !important;
    }

    .grid-header {
        text-align: center;
        background-color: #b9b9b9;
        padding: 4px;
        /*border: 1px solid white;*/
        border-right: 1px solid gray;
    }

    .col1 {
        border-right: 1px solid gray;
        padding-left: 5px;
    }

    .pool-col {
        padding: 2px 5px;
        border-right: 1px solid gray;
    }

    .define-items > .el-tabs__header {
        width: 100%;
    }

    .el-form-item {
        margin-bottom: 10px !important;
    }

    .div-certs {
        color: blue !important;
        font-weight: bold;
    }
</style>

<head>
<body>
<div id="app" class="my-app2">
  <div class="title">
    <span>奖项列表</span>
    <button onclick="history.back(-1)">返回</button>
  </div>

  <div class="content">
    <el-row>
      <el-col :span="2">
        <div style="position: fixed;">
          <div style="margin-top: 10px;">
            <el-tabs v-model="selectedArea" tab-position="left" class="define-items" tabPosition="left">
              <el-tab-pane v-for="(v) in areas" :label="v" :key="v" :name="v"></el-tab-pane>
            </el-tabs>
          </div>

        </div>
        <div style="width:10px;height:10px;"></div>

      </el-col>
      <el-col :span="20" style="padding-top: 10px;">
        <div style="border: 1px solid gray;width:1539px">
          <div class="cert-grid ">
            <div class="grid-header col1">奖项</div>
            <div class="pool-grid">
              <div class="grid-header">pool</div>
              <div class="grid-header">过滤人数</div>
              <div class="grid-header">缺考人数</div>
              <div class="grid-header">参赛人数</div>
              <div class="grid-header">获奖设置</div>
              <div class="grid-header">获奖结果</div>
              <div class="grid-header">异常提示</div>
            </div>
          </div>
          <div class="cert-grid" v-for="item in certData[selectedArea]">
            <div class="col1">{{item.certItem.name}}</div>

            <div class="top-pool-grid">
              <div class="pool-grid pool-grid-body" v-for="pool in item.items">
                <div class="pool-col pool-col1">
                  <span>{{getPoolKey(pool)}}</span>
                </div>
                <div class="pool-col pool-col2">
                  <el-link class="div-certs"
                           v-if="pool.filterList.length>0"
                           @click="openCertDetails(pool,'filterList')">{{pool.filterList.length}}
                  </el-link>
                </div>
                <div class="pool-col pool-col2">
                  <span>{{getAbsentNum(pool)}}</span>
                </div>
                <div class="pool-col pool-col2">
                  <el-link class="div-certs"
                           v-if="pool.poolList.length>0"
                           @click="openCertDetails(pool,'poolList')">{{pool.poolList.length}}
                  </el-link>
                </div>

                <div class="pool-col pool-col2">
                  <el-tooltip class="item" effect="dark" :content="getCertSetting(pool.certSettings,'certRate')"
                              placement="top">
                    <span>{{getCertSetting(pool.certSettings)}}</span>
                  </el-tooltip>

                </div>
                <div class="pool-col pool-col2">
                  <el-link class="div-certs" @click="openCertDetails(pool)">{{getCerts(pool.certs)}}</el-link>
                </div>
                <div class="pool-col pool-col2">
                  <span>{{getError(pool)}}</span>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div style="height: 50px;"></div>
      </el-col>
    </el-row>
  </div>

  <el-dialog title="获奖列表" width="80%" :visible.sync="html.openDetailStatus" :close-on-click-modal="true">
    <div>{{detailTitle}}</div>
    <el-table :data="detailList" sort-by="Rank" >
      <el-table-column type="index" label="排序" width="75"></el-table-column>
      <el-table-column property="id" label="id" width="75"></el-table-column>
      <el-table-column property="data.SchoolRegion" label="Region" width="100"></el-table-column>
      <el-table-column property="Name" label="Name"></el-table-column>
      <el-table-column property="data.SchoolName" label="SchoolName"></el-table-column>
      <el-table-column property="data.TeamNumber" label="TeamNumber" width="150"></el-table-column>
      <el-table-column property="data.Division" label="Division" width="100"></el-table-column>      
      <el-table-column property="Score" sortable :label="detailScoreName" width="150"></el-table-column>
      <el-table-column property="Rank" label="Rank" width="100"
                       v-if="['certList','list'].includes(detailListName)"></el-table-column>
      <el-table-column label="已获奖项" width="250" v-if="detailListName=='filterList'">
        <template slot-scope="scope">
          <span>{{getCertName(scope.row["_filter"])}}</span>
        </template>
      </el-table-column>

    </el-table>
  </el-dialog>
</div>
<script>
  new Vue({
    el: '#app',

    data: {
      html: {
        openDetailStatus: false,
      },
      detailScoreName: "",
      detailTitle: "",
      detailList: [],
      detailPgType: "person",
      detailListName: "certList",
      certData: {},
      selectedArea: "全国",
      areas: ["全国"],
      certTypeMap: [],
    },
    created: function () {
      this.areas.push(...(CertData.dataInfo.areas));
      this.certData = CertData.getCertData();
      this.certTypeMap = CertData.getCertTypeMap();
    },
    computed: {},
    methods: {
      openCertDetails(pool, listName = 'certList') {
        this.detailListName = listName;
        this.detailPgType=pool.certItem.pgType;
        this.detailTitle = pool.certItem.name + "(" + this.getPoolKey(pool) + ")";
        this.detailScoreName = pool.certItem.cnTestName;
        this.detailList = pool[listName];
        this.html.openDetailStatus = true;

      },
      getPoolKey(pool) {
        let r = [];
        for (let k in pool.key) {
          r.push(`${k}=${pool.key[k]}`)
        }
        return r.join(",");
      },
      getCertSetting(certSettings = {}, name = "certNum") {
        let r = [];
        (certSettings || []).forEach(s => {
          r.push(s[name])
        })
        return JSON.stringify(r);
      },
      getCerts(certs = []) {

        let r = [];
        (certs || []).forEach(s => r.push((s || []).length));
        return JSON.stringify(r);
      },
      getAbsentNum(pool){
        let r= pool["gList"].length-pool["items"].length;
        return r > 0 ? r : "";
      },
      getError(pool) {
        if (pool.error) {
          return pool.error;
        }
        let certSettings = pool.certSettings;
        let certs = pool.certs;

        let result = [];
        let isOK = true;
        for (let i = 0; i < certSettings.length; i++) {
          let a = certSettings[i]["certNum"];
          let b = (certs[i] || []).length;
          result.push(b-a)
          if (a != b) {
            isOK = false;
          }
        }
        return isOK ? "" : JSON.stringify(result);
      },
      getCertName(code) {
        let ct = this.certTypeMap[code];
        return ct ? ct["name"] : "";
      }
    }
  })
</script>
</body>


</html>